<template>
	<div class="shop-favorite">
		<div class="select-more">
			<Select :placeholder="$t('store.selectChannle')" @on-change="platformChange">
				<Option v-for="item in platformList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</div>
		<div v-if="storeList.length">
			<div class="mt-32 flex a-c f-w j-sb">
				<div 
					v-for="(item,index) in storeList" :key="index" 
					class="shop-item br-12 mb-24 flex a-c"
					:class="{'shop-close':item.status >= 10}"
					>
					<img v-if="item.shopImg" class="item-logo br-10" :src="item.shopImg" alt="">
					<img v-else-if="item.channel && storeIcon[item.channel]" class="item-logo br-10" :src="require(`@/assets/images/${storeIcon[item.channel]}`)" alt="">
					<div class="f-1 pl-20">
						<div class="flex a-c j-sb">
							<!-- 店铺名称 -->
							<div class="o-1 f-20 lin-24 col-333 bold item-title">
								{{item.shopName||''}}
							</div>
							<!-- 删除 -->
							<span class="iconfont icon-shanchu item-del ml-16 c-p" @click="storeDel(item)"></span>
						</div>
						<div class="mt-22 flex a-c j-sb">
							<!-- 新商品上线 -->
							<div>
								<div v-if="item.newProduct == 1 || item.status >= 10" class="f-18 lin-24 item-status" :class="item.status >= 10 ? 'col-aeb' : 'col-560'">
									{{item.status >= 10 ? $t('store.closeStore') : $t('store.storeGoodsNew')}}
								</div>
							</div>
							<!-- 进入店铺 -->
							<div class="flex a-c j-c br-4 item-join plr-12 col-1e1 f-16 lin-16 c-p" @click="storeDetail(item)">
								{{$t('store.goodsToStore')}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="t-r">
			  <Page 
					:total="totalShop" 
					@on-page-size-change="onPageSize" 
					:current="shopQuery.pageNo" 
					@on-change="onPage"
			    :page-size="shopQuery.pageSize" 
					show-sizer />
			</div>
		</div>
		<t-loading v-if="loading"></t-loading>
		<t-no-data v-if="!loading && storeList.length == 0"></t-no-data>
	</div>
</template>

<script>
	import TLoading from "@/components/t-loading";
	import TNoData from "@/components/t-no-data";
	import { pageShop,favoritesDeleteBatch } from "@/api/favorites";
	import { storeIcon } from '@/common/enum';
	
	export default {
		name: "shop",
		components: {
			TNoData,
			TLoading
		},
		data() {
			return {
				storeIcon,
				platformList: [
					{
						label: this.$t('user.all'),
						value:'all'
					},
					{
						label: 'TaoBao',
						value: 'TAOBAO'
					},
					{
						label: '1688',
						value: '1688'
					},
					{
						label: 'WeiDian',
						value: 'WEIDIAN'
					}
				],
				storeList: [],
				loading:false,
				shopQuery:{
					channel:'',
					pageNo:1,
					pageSize:10
				},
				totalShop:0,
			}
		},
		created() {
		  this.getPageShop();
		},
		methods: {
			//进入店铺
			storeDetail(item) {
				this.$router.push(`/store?shopId=${item.shopId}&channel=${item.channel}`);
			},
			//店铺删除
			storeDel(item){
				this.loading = true;
				favoritesDeleteBatch([item.shopId],'shop').then(res => {
					this.loading = false;
					this.$Message.success(this.$t('store.cancelMes'));
					this.onPage(1)
				}).catch(() => {
					this.loading = false;
				})
			},
			getPageShop(){
				this.loading = true;
				pageShop(this.shopQuery).then(res => {
					this.loading = false;
					this.storeList = res.result.records;
					this.totalShop = res.result.total;
				}).catch(() => {
					this.loading = false;
				})
			},
			// 显示
			onPageSize(size) {
			  this.shopQuery.pageSize = size;
			  this.shopQuery.pageNo = 1;
			  this.getPageShop();
			},
			// 下一页
			onPage(index) {
			  this.shopQuery.pageNo = index;
			  this.getPageShop();
			},
			//切换平台
			platformChange(e){
				if(e == 'all'){
					this.shopQuery.channel = '';
				}else{
					this.shopQuery.channel = e;
				}
				this.shopQuery.pageNo = 1;
				this.getPageShop();
			}
		}
	}
</script>

<style scoped lang="less">
	.shop-favorite {
		.select-more {
			width: 206px;
		}
		:deep(.select-more) {
			.ivu-select-selection {
				background: #F7F9FC;
				border: none;
				height: 52px;
				.ivu-select-placeholder,
				.ivu-select-selected-value {
					height: 52px;
					line-height: 52px;
				}
			}
			.ivu-select-item {
				height: 40px;
				line-height: 40px;
				display: flex;
				align-items: center;
			}
		}

		.shop-item {
			width: calc((100% - 15px) / 2);
			height: 120px;
			border: 1px solid #F1F2F7;
			box-sizing: border-box;
			padding: 20px 24px 20px 20px;
			// &:nth-child(2n){
			// 	margin-left:15px;
			// }
			.item-logo {
				width: 80px;
				height: 80px;
			}

			.item-del {
				color: #AEB0B9;
				font-size: 22px;
			}

			.item-title {
				width: 380px;
				box-sizing: border-box;
			}

			.item-join {
				min-width: 88px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid #1E1714;
			}
		}

		.shop-close {

			.item-logo,
			.item-title,
			.item-status {
				opacity: 0.5;
			}
		}
	}
</style>